<template>
  <div class="process-list">
    <div class="search">
      <hips-search
        v-model="createdUser"
        placeholder="请输入创建人"
        :enter-key="true"
        @search="query"
      />
    </div>
    <div v-if="this.loading" class="loading">
      <hips-spin size="24px" />
    </div>
    <hips-slide v-if="this.records.length" :pagination-include="false">
      <hips-slide-item
        v-for="item in this.records"
        :key="item.get('id')"
        @on-click="() => handleClick(item)"
      >
        <div class="process-item">
          <div class="process-field">
            <span>{{ item.getField('processStatus').getProp('label') }}：</span>
            <span>{{ item.get('processStatus') }}</span>
          </div>
          <div class="process-field">
            <span>{{ item.getField('documentNum').getProp('label') }}：</span>
            <span>{{ item.get('documentNum') }}</span>
          </div>
          <div class="process-field">
            <span
              >{{ item.getField('processMessage').getProp('label') }}：</span
            >
            <span>{{ item.get('processMessage') }}</span>
          </div>
          <div class="process-field">
            <span>{{ item.getField('createdUser').getProp('label') }}：</span>
            <span>{{ item.get('createdUser') }}</span>
          </div>
          <div class="process-field">
            <span>{{ item.getField('creationDate').getProp('label') }}：</span>
            <span>{{ item.get('creationDate') }}</span>
          </div>
        </div>
      </hips-slide-item>
    </hips-slide>
  </div>
</template>

<script>
/**
 * 入参 orderId
 * 出参 processCount
 * 内置方法 query
 */
import Dsx from '@hips/plugin-dataset-vuex';
import { LocalStorage } from '@hips/vue-core';
import { Slide, SlideItem, Search, Spin, Button } from '@hips/vue-ui';

export default {
  components: {
    [Slide.name]: Slide,
    [SlideItem.name]: SlideItem,
    [Search.name]: Search,
    [Spin.name]: Spin,
    [Button.name]: Button,
  },
  props: {
    // 入参-请求单编号
    orderId: {
      type: String,
    },
    tenantId: {
      type: [String, Number],
    },
    businessObjectCode: {
      type: String,
    },
    // 入参-点击处理历史单据事件流
    handleClickItem: {
      type: Object,
    },
    // 预置参数-配置内置函数至飞搭自定义事件流
    setEventFunction: {
      type: Function,
    },
    // 预置参数-配置出参
    handleChangeOutputParams: {
      type: Function,
    },
    // 预置参数-组件执行页面事件流
    handleRunEvent: {
      type: Function,
    },
    // 预置参数-修改自定义组件入参
    changeEventParams: {
      type: Function,
    },
  },
  data() {
    const dsx = new Dsx({
      name: 'srq-order-process',
      autoQuery: false,
      autoCreate: false,
      fields: [
        {
          name: 'id',
          type: 'text',
        },
        {
          name: 'processMessage',
          type: 'text',
          label: '处理意见',
        },
        {
          name: 'processStatus',
          type: 'text',
          label: '提交环节',
        },
        {
          name: 'orderId',
          type: 'text',
          label: '请求单',
        },
        {
          name: 'documentNum',
          type: 'text',
          label: '请求单',
        },
        {
          name: 'createdUser',
          type: 'text',
          label: '创建人',
        },
        {
          name: 'creationDate',
          type: 'text',
          label: '创建时间',
        },
      ],
      dataKey: 'content',

      primaryKey: 'id',
    });

    return { dsx, createdUser: null, loading: false };
  },
  computed: {
    records() {
      return this.dsx.records.data;
    },
  },
  mounted() {
    this.handleChangeOutputParams({
      name: 'processCount',
      value: '0',
    });

    this.setEventFunction('query', this.query);
    this.query();
  },

  methods: {
    query() {
      this.loading = true;
      const token = LocalStorage.get('hips-access-token');

      const listUrl = `https://hzeronb.saas.hand-china.com/hmde/v1/${
        this.tenantId !== undefined &&
        this.tenantId !== null &&
        this.tenantId !== 0
          ? this.tenantId + '/'
          : ''
      }executor/${this.businessObjectCode}/list`;
      const params = [
        { name: 'orderId', value: this.orderId, type: 'EQUAL' },
        {
          name: 'createdUser',
          value: this.createdUser,
          type: 'FULLY_FUZZY',
        },
      ];

      const queryParams = [];
      params.forEach((param) => {
        const { name, value, type } = param;
        if (value) {
          queryParams.push(`${name}@query-type=${type}&${name}=${value}`);
        }
      });

      const url = `${listUrl}?${queryParams.join('&')}`;
      const config = {
        url,
        method: 'GET',
        headers: {
          Authorization: `bearer ${token}`,
        },
      };

      this.dsx.records.clearAll();

      this.$dsxFetch
        .fetch(config)
        .then((res) => {
          this.dsx.records.push(res);

          const length = this.dsx.records.length;
          this.handleChangeOutputParams({
            name: 'processCount',
            value: length.toString(),
          });
        })
        .finally(() => {
          this.loading = false;
        });

      return Promise.resolve();
    },

    handleClick(record) {
      const createdUser = record.get('createdUser');
      const creationDate = record.get('creationDate');
      this.handleChangeOutputParams({
        name: 'selectedCreatedUser',
        value: createdUser,
      });
      this.handleChangeOutputParams({
        name: 'selectedCreationDate',
        value: creationDate,
      });

      this.handleRunEvent(this.handleClickItem.flowCode);
    },
  },
};
</script>

<style scoped lang="less">
.process-list {
  background: rgb(250, 250, 250);

  .search {
    padding: 12px 16px;
    background-color: #fff;
  }

  .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
  }

  .process-item {
    background-color: rgb(255, 255, 255);
    border-color: rgb(240, 240, 240);
    border-radius: 1.067vw;
    border-width: 0vw;
    border-style: solid;
    margin: 3.2vw 4.267vw 0;
    padding: 3.2vw 4.267vw;

    .process-field {
      font-size: 14px;
      line-height: 24px;
      span:first-child {
        color: rgb(89, 89, 89);
      }
      span:last-child {
        color: rgb(38, 38, 38);
      }
    }
  }
}
</style>
